<template>
  <div class="hotlabels">
    <div class="hander">
      <h1>热点标签</h1>
      <div class="top">
        <Steps :current="1">
          <Step title="已完成" content="基本信息"></Step>
          <Step title="进行中" content="服务申请"></Step>
          <Step title="待进行" content="概览"></Step>
        </Steps>
      </div>
      <!--可多选  -->
      <div class="center">
        <Form :label-width="90" style="width: 100%; height: 80px" inline>
          <FormItem label="一级分类" v-model="topClass.value">
            <Cascader
              :data="topClass"
              change-on-select
              style="width: 150px"
            ></Cascader>
          </FormItem>
          <FormItem label="二级分类">
            <Cascader
              :data="twoCategories"
              change-on-select
              style="width: 150px"
            ></Cascader>
          </FormItem>
          <FormItem label="">
            <Input
              style="width: 150px"
              placeholder="请输入关键字"
              v-model="formItem.input"
            >
              <Icon type="ios-search" slot="suffix" />
            </Input>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              icon="md-refresh"
              ghost
              style="margin-right: 20px"
              >重置</Button
            >
            <Button type="primary" icon="ios-search">搜索</Button>
          </FormItem>
        </Form>
      </div>
      <!-- 待修改 -->
      <div
        style="
          margin-top: 50px;
          width: 100%;
          border: 1px solid black;
          display: inline-block;
        "
      >
        <div style="display: inline-block">热点标签:</div>
        <hr />
        <div
          style="
            width: 100%;
            height: 500px;
            padding: 10px;
            position: relative;
            top: 0;
            left: 0;
            display: flex;
          "
        >
          <div
            class="card"
            @mouseover="mouseover(i)"
            @mouseout="mouseout(i)"
            v-for="(item, i) in list"
            :key="i"
          >
            <div class="hotcard">
              <div style="display:flex;justify-content: space-between;">
                <span class="cardtitle">二级标题二级标题</span>
                <span v-if="item.hasOrder" class="hasOrder">已订购</span>
              </div> 
              <div style="padding: 0 10px 10px 10px">
                <div style="margin-top: 10px; width: 150px; text-align: center">
                  <Icon
                    type="ios-chatboxes"
                    style="color: #418aff; vertical-align: baseline"
                  />
                  <span
                    style="
                      display: inline-block;
                      width: 132px;
                      font-size: 10px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                    >数据采集交换服务交换服务</span
                  >
                  <span
                    style="
                      font-size: 10px;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      width: 178px; //指定宽度
                      background: #ccc;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2; //指定显示多少行
                    "
                  >
                    数据采集交换服务的描述；低数采集交换服务的选择描述选择描诉
                  </span>
                </div>
                <div></div>
              </div>
            </div>

            <div class="hotmore" :class="`show${i}`">
              <Button type="primary" ghost style="margin-right: 20px"
              >更多</Button>
              <Button type="primary" @click="(orderClick(i))">订购</Button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮需固定   绝对定位  百分比 -->
    <div class="footer">
      <Button type="info" ghost style="margin-right: 20px" @click="aa"
        >上一步</Button
      >
      <Button type="primary" @click="bb">下一步</Button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topClass: [
        {
          value: "beijing",
          label: "北京",
        },
        {
          value: "gugong",
          label: "故宫",
        },
        {
          value: "tiantan",
          label: "天坛",
        },
        {
          value: "wangfujing",
          label: "王府井",
        },

        {
          value: "jiangsu",
          label: "江苏",
        },
      ],
      twoCategories: [
        {
          value: "suzhou",
          label: "苏州",
          children: [
            {
              value: "zhuozhengyuan",
              label: "拙政园",
            },
            {
              value: "shizilin",
              label: "狮子林",
            },
          ],
        },
        {
          value: "suzho",
          label: "苏",
          children: [
            {
              value: "zhuozhengyua",
              label: "政园",
            },
            {
              value: "shizi",
              label: "狮子",
            },
          ],
        },
      ],
      formItem: {
        input: "",
      },
      list: [{hasOrder: false}, {hasOrder: false}, {hasOrder: false}],
    };
  },
  methods: {
    mouseover(i) {
      document.querySelector(`.show${i}`).style = 'visibility: visible;'
    },
    mouseout(i){
      document.querySelector(`.show${i}`).style = 'visibility: hidden;'

    },
    orderClick(index) {
      this.list[parseInt(index)].hasOrder = !this.list[parseInt(index)].hasOrder
    }
  },
};
</script>

<style lang="less" scoped>
.hotlabels {
  margin: auto;
  width: 90%;
  border: 1px solid red;
  .hander {
    border: 1px solid green;
    .top {
      // margin: auto;
      width: 100%;
      min-height: 80px;
      border-bottom: 1px solid #ccc;
    }
    .center {
      margin: auto;
      width: 100%;
      // height: 500px;
      margin-top: 50px;
    }
  }
  .footer {
    margin-top: 30%;
    text-align: center;
  }
  .card {
    position: relative;
    width: 200px;
    height: 110px;
    margin-right: 30px;
    .hotcard {
      width: 100%;
      height: 100%;
      // margin-right: 20px;
      border: 1px solid #ccc;
      border-radius: 13px;
      box-sizing: border-box;
      background: url("../../../../assets/bcg1.jpg") no-repeat right bottom;
      background-size: 80px auto;

      .hasOrder {
        display: inline-block;
        color: #fff;
        background-color: #418aff;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 10px;
      }
      .cardtitle {
        display: inline-block;
        color: #fff;
        background-color: #418aff;
        border-top-left-radius: 12px;
        border-bottom-right-radius: 10px;
      }
    }
    .hotmore {
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      background-color: rgba(255, 255, 255, 0.9);
      border: 1px solid #ccc;
      border-radius: 12px;

    }
  }
}
</style>